<template>
  <!-- 新增/修改弹出层 -->
  <el-dialog
    class="AddEditProduct-container"
    :title="dialogState === 'add' ? '新增商品' : '修改'"
    :visible="addEditDialogShow"
    width="60%"
    center
    top="0vh"
    :append-to-body="true"
    :close-on-click-modal="false"
    @close="btnClose"
  >
    <div class="center">
      <el-form ref="form" :model="formData" :rules="formRules" label-width="120px">
        <el-form-item prop="title" label="商品名称">
          <el-input v-model="formData.title" placeholder="请输入商品名称" />
        </el-form-item>
        <!-- 上传图片 -->
        <el-form-item ref="uploadElement" label="上传封面" prop="cover">
          <el-upload action="#" :on-preview="handlePictureCardPreview" list-type="picture-card">
            <i class="el-icon-plus" />
          </el-upload>
          <el-dialog :visible.sync="dialogVisible">
            <img width="100%" :src="formData.cover" alt="">
          </el-dialog>

        </el-form-item>
        <el-form-item label="商品分类" prop="category_id">
          <el-select v-model="formData.category_id" placeholder="请选择商品分类">
            <el-option v-for="item in options" :key="item.id" :label="item.name" :value="item.id" />
          </el-select>
        </el-form-item>
        <el-form-item label="商品描述" prop="desc">
          <el-input v-model="formData.desc" type="textarea" placeholder="请输入商品描述，如该商品 美观大方 性价比高 不容错过" />
        </el-form-item>
        <el-form-item class="unit" label="商品单位" prop="unit">
          <el-input v-model="formData.unit" placeholder="请输入商品单位，如：件、个、箱" />
        </el-form-item>
        <el-form-item label="总库存" prop="stock">
          <el-input v-model="formData.stock" :min="0" type="number">
            <template slot="append">元</template>
          </el-input>
        </el-form-item>
        <el-form-item label="库存预警" prop="min_stock">
          <el-input v-model="formData.min_stock" type="number" :min="0">
            <template slot="append">元</template>
          </el-input>
        </el-form-item>
        <el-form-item label="最低销售价" prop="min_price">
          <el-input v-model="formData.min_price" type="number" :min="0">
            <template slot="append">元</template>
          </el-input>
        </el-form-item>
        <el-form-item label="最低原价" prop="min_oprice">
          <el-input v-model="formData.min_oprice" type="number" :min="0">
            <template slot="append">元</template>
          </el-input>
        </el-form-item>
        <el-form-item label="库存显示">
          <el-radio-group v-model="formData.stock_display">
            <el-radio :label="1" border size="medium">是</el-radio>
            <el-radio :label="0" border size="medium">否</el-radio>
          </el-radio-group>

        </el-form-item>
        <el-form-item label="是否上架">
          <el-radio-group v-model="formData.status">
            <el-radio :label="0" border size="medium">放入仓库</el-radio>
            <el-radio :label="1" border size="medium">立即上架</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" size="small" @click="isOk">确 定</el-button>
        <el-button size="small" @click="btnClose">取 消</el-button>
      </span>
    </div>
  </el-dialog>
</template>

<script>
import { addGoods, editGoods } from '@/api/goods'
export default {
  name: 'AddEditProduct',
  props: {
    addEditDialogShow: {
      type: Boolean,
      default: false
    },
    dialogState: {
      type: String,
      default: null
    },
    options: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      // 新增/编辑表单数据
      formData: {
        title: '',
        category_id: null, // 商品分类
        cover: '',
        desc: '',
        unit: '',
        stock: 0, // 总库存
        min_stock: 0, // 库存预警
        status: 1, // 是否上架 0仓库1上架
        stock_display: 1, // 库存显示 0隐藏1禁用
        min_price: 0, // 	最低销售价
        min_oprice: 0 // 最低原价
      },
      formRules: {
        title: [
          { required: true, message: '请填写商品名称', trigger: 'blur' },
          { min: 1, max: 20, message: '长度在 1 到 20 个字符', trigger: 'blur' }
        ],
        // cover: [
        //   { required: true, message: '请添加商品封面', trigger: 'change' }
        // ],
        category_id: [
          { required: true, message: '请填写商品类型', trigger: 'blur' }
        ],
        desc: [
          { required: true, message: '请填写商品描述', trigger: 'blur' },
          { min: 1, max: 60, message: '长度在 1 到 60 个字符', trigger: 'blur' }
        ],
        unit: [
          { required: true, message: '请填写商品单位', trigger: 'blur' },
          { min: 1, max: 1, message: '只能输入一个单位', trigger: 'blur' }
        ],
        stock: [
          { required: true, message: '请填写总库存', trigger: 'blur' }
        ],
        surplus: [
          { required: true, message: '请填写库存预警', trigger: 'blur' }
        ],
        min_price: [
          { required: true, message: '请填写现销售价格', trigger: 'blur' }
        ],
        min_oprice: [
          { required: true, message: '请填写原销售价格', trigger: 'blur' }
        ]
      },
      goodsId: null,
      dialogVisible: false // 图片预览
    }
  },
  methods: {
    // 等待父组件调用传值
    setFormData(data, id) {
      this.formData = data
      this.goodsId = id
    },
    // 关闭弹层
    btnClose() {
      this.formData = {
        title: '',
        category_id: null, // 商品分类
        cover: '',
        desc: '',
        unit: '',
        stock: 0, // 总库存
        min_stock: 0, // 库存预警
        status: 1, // 是否上架 0仓库1上架
        stock_display: 1, // 库存显示 0隐藏1禁用
        min_price: 0, // 	最低销售价
        min_oprice: 0 // 最低原价
      }
      // 关闭弹层
      this.$emit('update:addEditDialogShow', false)
      // 清空数据和表单校验
      this.$refs.form.resetFields()
    },
    // 新增/编辑确定方法
    isOk() {
      this.$refs.form.validate(async valid => {
        if (valid) {
          if (this.dialogState === 'add') {
            // 新增
            try {
              await addGoods(this.formData)
              this.$message.success('新增商品成功')
            } catch (error) {
              console.log(error)
              this.$message.error('新增商品失败')
            }
          } else {
            // 编辑
            try {
              await editGoods(this.goodsId, this.formData)
              this.$message.success('修改商品成功')
            } catch (error) {
              console.log(error)
              this.$message.error('修改商品失败')
            }
          }
          // 从新拉取数据
          this.$emit('addEditProduct')
          this.btnClose()
        }
      })
    },
    // 图片预览
    handlePictureCardPreview() {
      this.dialogVisible = true
    }
  }
}
</script>

<style lang="scss" scoped>
::v-deep .el-dialog {
  height: auto;
}

.el-col {
  width: unset;
}

.unit {
  width: 500px;
}

::v-deep .el-input-group {
  width: 220px;
}
</style>
